<template>
  <div>
    <el-dialog v-model="dialogVisible" title="新增/编辑家属" width="500" :before-close="handleClose">
      <span>
        <el-form ref="familyRef" :model="family" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="family.name" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input v-model="family.mobile" placeholder="请输入联系电话" clearable />
          </el-form-item>
          <el-form-item label="身份证号：">
            <el-input v-model="family.idCard" placeholder="请输入身份证号" clearable />
          </el-form-item>
          <el-form-item label="与老人关系：">
            <el-select v-model="family.relation" placeholder="请选择" clearable>
              <el-option v-for="item in stateList" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="family.gender">
              <el-radio :value="1">男</el-radio>
              <el-radio :value="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系地址：">
            <el-input v-model="family.address" placeholder="请输入联系地址" clearable />
          </el-form-item>
        </el-form>

      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit(familyRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue'
import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { AddParams, familyData } from '@/api/market/elderly/type';

const emit = defineEmits(['close']);
const props = defineProps(['currentFamliy']);



const family = reactive<familyData>({
  id: 0,
  name: "",
  mobile: "",
  idCard: "",
  relation: "",
  gender: 1,
  address: ""
})

const stateList = ref(['父子', '母子', '父女', '母女', '兄弟', '姐妹', '朋友', '其他', '本人'])
const ruleForm = inject<AddParams>('ruleForm');

const familyRef = ref();

//dialog默认显示
const dialogVisible = ref(true)

//规则
const rules = reactive<FormRules<familyData>>({
  name: [{ required: true, message: "请输入老人姓名", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
});



//确定
const submit = async (formEl: FormInstance | undefined) => {


  if (!formEl) return
  await formEl.validate((valid, fields) => {
  
    if (valid) {
      if(props.currentFamliy.id){
        //修改
        family.id = props.currentFamliy.id;
      }else{
        //添加
        family.id = ruleForm!.family.length + 1;
      }
      emit('close', family)
    } else {

    }
  })
}

//关闭
const handleClose = () => {
  emit('close');
}

onMounted(() => {
  if(props.currentFamliy){
    Object.assign(family,props.currentFamliy)
  }
  // console.log("props11", props.currentFamliy);
})

</script>

<style scoped></style>